<template>
	<view class="page_box" style="overflow-x: hidden;">
		<cu-custom bgColor="bg-gradual-blue" :isBack="fasle">
			<block slot="content">寄快递</block>
		</cu-custom>
		<view class="cu-bar bg-white solid-bottom">
			<view class="action">
				<text class="cuIcon-titles text-orange"></text> 寄件人信息
			</view>
		</view>
			<view class="address-item x-f">
				<label class="x-f flex-sub">
					<text class="item-title">寄件人：</text>
					<input class="inp flex-sub" placeholder="请填写寄件人姓名" type="text" v-model="sendManName" />
				</label>
			</view>
			<view class="address-item x-f">
				<label class="x-f flex-sub">
					<text class="item-title">手机号：</text>
					<input class="inp flex-sub" placeholder="请输入寄件人手机号" type="number" v-model="sendManMobile" />
				</label>
			</view>
			<view class="area-box x-f">
				<label class="x-f x-start">
					<view class="area-item"><text class="item-title">寄件地址：</text></view>
					
					<textarea
						auto-height
						class="area-inp"
						type="text"
						placeholder="请输入寄件地址"
						placeholder-class="area-pl"
						v-model="sendManPrintAddr"
					/>
					<text class="cuIcon-locationfill" @tap="chooseLocation"></text>
				</label>
			</view>
			
		<view style="background-color: #f1f1f1;height: 10upx;"></view>
		
		<view class="cu-bar bg-white solid-bottom">
			<view class="action">
				<text class="cuIcon-titles text-orange"></text> 收件人信息
			</view>
		</view>
		 <view class="address-item x-f">
		 	<label class="x-f flex-sub">
		 		<text class="item-title">收件人：</text>
		 		<input class="inp flex-sub" placeholder="请填写收件人姓名" type="text" v-model="recManName" />
		 	</label>
		 </view>
		 <view class="address-item x-f">
		 	<label class="x-f flex-sub">
		 		<text class="item-title">手机号：</text>
		 		<input class="inp flex-sub" placeholder="请填写收件人手机号" type="text" v-model="recManMobile" />
		 	</label>
		 </view>
		 <view class="destination address-item x-f" >
		 			 <view style="display: flex;flex: 1;">
		 			 	<text>收件地址:</text> <input type="text" v-model="recManPrintAddr"  style="flex: 1;padding: 0upx 20upx;" @input="inputdestination" placeholder="请填写收件人地址"/>
		 			 </view>
		 			<view style="background-color: #1aad19;color: #FBFBFB;padding: 10upx;"><pickerAddress @change="citychange">选择地区></pickerAddress></view>
		 </view>
		 <view style="background-color: #f1f1f1;height: 10upx;"></view>
		 
		 <view class="uni-list">
		             <view class="uni-list-cell">
		                 <view class="uni-list-cell-left">
		                     快递公司
		                 </view>
		                 <view class="uni-list-cell-db">
		                     <picker @change="pickerChange" :value="expressIndex" :range="expressList" range-key="com">
		                         <view class="uni-input">{{expressIndex?expressList[expressIndex]['com']:"点此选择 >"}}</view>
		                     </picker>
		                 </view>
		             </view>
		 </view>
		 <view class="address-item x-f">
		 	<label class="x-f flex-sub">
		 		<text class="item-title">货物类型： </text>
		 		<input class="inp flex-sub" placeholder="填写货物类型" type="text" v-model="cargo" />
		 	</label>
		 </view>
		 <view class="address-item x-f">
		 	<label class="x-f flex-sub">
		 		<text class="item-title">备注： </text>
		 		<input class="inp flex-sub" placeholder="请填写备注" type="text" v-model="remark" />
		 	</label>
		 </view>
		 <view style="background-color: #f1f1f1;height: 10upx;"></view>
		 <view class="foot_box "><button class="cu-btn add-btn" @tap="order">确认下单</button></view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
export default {
	computed: {
		...mapGetters(['userInfo'])
	},
	data() {
		return {
			//物流公司列表
			expressList:[
	{"com":"顺丰速运","code":"shunfeng"},
	{"com":"圆通速递","code":"yuantong"},
	{"com":"中通快递","code":"zhongtong"},
	{"com":"韵达快递","code":"yunda"},
	{"com":"百世(汇通)快递","code":"huitongkuaidi"},
	{"com":"申通快递","code":"shentong"},
	{"com":"宅急送","code":"zhaijisong"},
	{"com":"德邦快递","code":"debangkuaidi"},
	{"com":"优速快递","code":"youshuwuliu"},
	{"com":"中通快运","code":"zhongtongkuaiyun"},
	{"com":"韵达快运","code":"yundakuaiyun"},
	{"com":"圆通快运","code":"yuantongkuaiyun"},
	{"com":"京东物流","code":"jd"}
],
			expressIndex:null,//第几个索引
			addressData: {
				id: 0,
				consignee: '',
				phone: '',
				area_id: '',
				address: '',
				is_default: false,
				latitude: '',
				longitude: ''
			},
			chooseAddress: '', //定位地址
			area_text: '',
			// 城市
			cityPickerValueDefault: [0, 0, 0],
			pickerData: {},
			from: '',
			com:"",
			recManName:"",
			recManMobile:"",
			recManPrintAddr:"",
			sendManName:"",
			sendManMobile:"",
			sendManPrintAddr:"",
			cargo:"",
			remark:"",
		};
	},
	methods: {
		// 地图选择地址
		chooseLocation() {
			uni.chooseLocation({
				success: res => {
					this.sendManPrintAddr = res.address;
				},
				fail: err => {
					console.log(err);
				}
			});
		},
		// 确认发布订单
		order() {
			uni.request({
			    url: "http://cloud.kuaidi100.com/api",
				method:"POST",
				header: {
					'content-type': 'application/x-www-form-urlencoded',
					},
			    data: {
			        secret_key:"znInVfCiSFkpBrw7dj",
			        secret_code:"ddffadd3df4b4c0d8d6f9942c7a8c990",
			        secret_sign:"1E717DFE67B4C50B13C6CF2B61EE6813",
			        com:this.com,
					recManName:this.recManName,
					recManMobile:this.recManMobile,
					recManPrintAddr:this.recManPrintAddr,
					sendManName:this.sendManName,
					sendManMobile:this.sendManMobile,
					sendManPrintAddr:this.sendManPrintAddr,
					cargo:this.cargo,
					remark:this.remark,
					callBackUrl:"https://5bf84fa9-ba54-4b84-bd02-e2f99798cf82.bspapp.com/http/callBackUrl"
			    },
			    success: (res) => {
					if(res.data.code!==200){
						uni.showToast({
							title: res.data.message,
							icon:"none"
						});
						return;
					}else{
						//在这里要获取到taskid,并存入云数据库中
						uniCloud.callFunction({
							name:"saveMySend",
							data:{
								taskId:res.data.data.taskId,
								userId:this.userInfo._id
							}
						}).then((res)=>{console.log(res);})
						//提示信息
						uni.showToast({
							title: "下单成功",
							icon:"success",
							success:()=>{
								uni.switchTab({
									url:"pages/user/user"
								})
							}
						});
					}
				}
			})
		},
		//选择快递公司
		pickerChange(e){
			this.expressIndex = e.detail.value;
			this.com = this.expressList[this.expressIndex].code;
		},
		citychange(data) {
			// 如果是直辖市,避免重复显示市名,就删掉一个市名
			if(data.data[0]==data.data[1]){
				data.data.splice(0,1)
			}
		    this.recManPrintAddr = data.data.join('')
		},
		//目的地地址发生变化时
		inputdestination(e){
			console.log(e.detail.value);
			this.recManPrintAddr=e.detail.value
		}
	}
		
}

</script>

<style lang="scss">
	page{
		overflow: hidden;
	}
// 点击定位
.cuIcon-locationfill {
		font-size: 34rpx;
		margin-right: 10rpx;
	}
.location-item {
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 500;
	background-color: #fff;
	color: rgba(167, 111, 13, 1);
	.address-box {
		border-radius: 6rpx;
		height: 72rpx;
		padding: 0 30rpx;
		width: 340rpx;
	}

	.cuIcon-focus,
	.cuIcon-location {
		font-size: 44rpx;
		margin-right: 10rpx;
	}
	.cuIcon-right {
		font-size: 32rpx;
	}
}
.address-item {
	height: 94rpx;
	background: #fff;
	border-bottom: 1rpx solid rgba(#dfdfdf, 0.5);
	padding: 0 25rpx;

	.item-title {
		color: #333;
		font-size: 28rpx;
		white-space: nowrap;
	}
	.inp {
		color: #333;
		font-size: 28rpx;
	}
}
.area-box {
	padding-bottom: 60rpx;
	background: #fff;
	padding: 30rpx 25rpx;
	border-bottom: 1rpx solid rgba(223, 223, 223, 0.5);
	.item-title {
		font-size: 28rpx;
		line-height: 28rpx;
		vertical-align: middle;
		white-space: nowrap;
	}
	.area-inp {
		color: #333;
		font-size: 28rpx;
		vertical-align: middle;
		width: 550rpx;
	}
}
.default-box {
	height: 100rpx;
	padding: 0 25rpx;
	background: #fff;
	margin-top: 20rpx;
	.title {
		font-size: 28rpx;
	}
	.switch {
		transform: scale(0.8);
	}
}
.foot_box {
	padding: 0 20rpx;
	background: #f1f1f1;

	.add-btn {
		width: 710rpx;
		height: 80rpx;
		background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
		border: 1rpx solid rgba(238, 238, 238, 1);
		border-radius: 40rpx;
		color: rgba(#fff, 0.9);
	}
	.delete-btn {
		width: 432rpx;
		height: 70rpx;
		background: linear-gradient(93deg, rgba(208, 19, 37, 1), rgba(237, 60, 48, 1));
		box-shadow: 0px 7rpx 6rpx 0px rgba(#ed3c30, 0.22);
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		border-radius: 35rpx;
		padding: 0;
		margin-right: 20rpx;
	}
	.save-btn {
		width: 432rpx;
		height: 70rpx;
		background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
		border: 1rpx solid rgba(238, 238, 238, 1);
		border-radius: 40rpx;
		color: rgba(#fff, 0.9);
	}
}

/*盒子模型*/
// @each $typeKey, $type in $spaceTypes {
// 	@each $sizeKey, $size in $spaceSizes {
// 		// margin-top:10rpx
// 		@each $directionKey, $direction in $spaceDirections {
// 			.#{$typeKey}#{$directionKey}#{$sizeKey} {
// 				#{$type}-#{$direction}: $size;
// 			}
// 		}

// 		// margin: 10rpx 0;
// 		.#{$typeKey}x#{$sizeKey} {
// 			#{$type}-left: $size;
// 			#{$type}-right: $size;
// 		}
// 		.#{$typeKey}y#{$sizeKey} {
// 			#{$type}-top: $size;
// 			#{$type}-bottom: $size;
// 		}

// 		// margin: 10rpx ;
// 		.#{$typeKey}a#{$sizeKey} {
// 			#{$type}: $size;
// 		}
// 	}
// }
/*按钮禁用*/
.disabled {
	outline: 0 none;
	cursor: default !important;
	opacity: 0.4;
	filter: alpha(opacity=40);
	-ms-pointer-events: none;
	pointer-events: none;
}

/**
 * 
 * 自定义class工具
 * 
*/

.pad {
	padding: 0 30upx;
}
// 格式化页面
.page_box {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow-x: hidden;
	background: #f6f6f6;
}
.scroll-box {
	flex: 1;
	height: 100%;
	position: relative;
}
.content_box {
	flex: 1;
	border-bottom: 1rpx solid rgba(223, 223, 223, 0.5);
}
/*单行文本溢出省略号*/
.one-t {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	transition: all linear 0.2s;
}
/*多行文本溢出省略号*/
.more-t {
	overflow: hidden;
	text-overflow: ellipsis;
	 word-break:break-all;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	transition: all linear 0.2s;
}

/* ==================
          flex布局(colorui里面也有相关基础样式)
 ==================== */
/* x水平排列*/
.x-f {
	display: flex;
	align-items: center;
}
/*x两端且水平居中*/
.x-bc {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
/*x平分且水平居中*/
.x-ac {
	display: flex;
	justify-content: space-around;
	align-items: center;
}
/*x水平靠上对齐*/
.x-start {
	display: flex;
	align-items: flex-start;
}
/*x水平靠下对齐*/
.x-end {
	display: flex;
	align-items: flex-end;
}
/*上下左右居中*/
.x-c {
	display: flex;
	justify-content: center;
	align-items: center;
}
/*y竖直靠左*/
.y-start {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
/*y竖直靠右*/
.y-end {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
/*y竖直居中*/
.y-f {
	display: flex;
	flex-direction: column;
	align-items: center;
}
// y竖直两端
.y-b {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
/*y竖直两端居中*/
.y-bc {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}
// 选择快递公司
.picker,.inputBox{
	width:450rpx;
	flex-direction: row;
	background-color: #F7F7F7;
	border-radius: 6px;
	margin-left:15rpx;
	height:35px;
	line-height:35px;
	padding: 0 20rpx;
}
.picker{
	justify-content: center;
}
.row{
	height:50px;
	align-items: center;
	flex-direction: row;
	background-color: #FFFFFF;
}
.expressTitle{
	color:#333333;
	font-size:30rpx;
	padding-left:20rpx;
}
.uni-list-cell{
	height: 90upx;
	border-bottom: 1rpx solid rgba(#dfdfdf, 0.5);
}
.uni-input{
	padding: 0 0;
}

.destination{
	display: flex;
	justify-content:space-between;
}
</style>
